<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 表单 -->
    <el-form
      :model="shopData"
      :rules="rules"
      status-icon
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="餐厅名称" prop="room">
        <el-input v-model="shopData.room"></el-input>
      </el-form-item>
      <el-form-item label="餐厅描述" prop="roominfo">
        <el-input v-model="shopData.roominfo"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="shopData.address"></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <el-input v-model="shopData.label"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="shopData.tel"></el-input>
      </el-form-item>
      <el-form-item label="营业时间段">
        <el-time-select
          placeholder="起始时间"
          v-model="shopData.starttime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
          }"
        >
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="shopData.endtime"
          :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
            minTime: shopData.startTime,
          }"
        >
        </el-time-select>
      </el-form-item>
      <el-form-item label="logo">
        <el-upload
          class="avatar-uploader"
          action="http://localhost/shop/uploadPic"
          :show-file-list="false"
          name="shopImg"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="shopData.logo" :src="shopData.logo" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>



<script>
export default {
  data() {
    //验证手机号的正则表达式
    let reg =
      /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
    //验证方法
    let validatorPhone = function (phone, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    return {
      shopData: {
        room: "",
        roominfo: "",
        address: "",
        label: "",
        tel: "",
        //营业时间段
        starttime: "",
        endtime: "",
        logo: "https://img1.baidu.com/it/u=3311948344,2093308219&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500",
      },
      rules: {
        room: [
          { required: true, message: "请输入餐厅名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        roominfo: [
          { required: true, message: "请输入餐厅名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入餐厅地址", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        label: [
          { required: true, message: "请输入餐厅标签", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        tel: [{ required: true, validator: validatorPhone, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getById();
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.put("/shop/update", {
            roomid: 1,
            room: this.shopData.room,
            roominfo: this.shopData.roominfo,
            label: this.shopData.label,
            address: this.shopData.address,
            tel: this.shopData.tel,
            starttime: this.shopData.starttime,
            endtime: this.shopData.endtime,
            logo: this.shopData.logo,
          });
          if (res.flag == true) {
            this.$message.success("修改成功");
          } else {
            return this.$message.error("修改失败");
          }
        }
      });
    },
    //这个用来编辑 回显
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl,"图片")
      this.shopData.logo = res.data;
      console.log(res, ".......");
      console.log(file, "............");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    //回显餐厅信息
    async getById() {
      const { data: res } = await this.$http.get(`/shop/getById/1`);
      console.log(res, "回显餐厅信息");
      this.shopData = res.data;
    },
  },
};
</script>

<style scoped>
.el-form {
  padding: 25px 0;
}
.avatar-uploader{
  
}
.avatar{
height: 300px;
  width: 300px;
}
</style>